<template>
    <div class="freightEdit">
        <form-header :title="'新建运费方案'"></form-header>
        <div class="content">
            <div class="select">
                <div class="selectCell" @click="addName">
                    <div class="leftCell">模板名称</div>
                    <div class="rightCell">
                        <span>{{name!=''?name:'请输入名称'}}</span>
                        <i class="cubeic-arrow"></i>
                    </div>
                </div>
                <div class="selectCell">
                    <div class="leftCell">单独计费</div>
                    <div class="rightCell">
                        <cube-switch/>
                    </div>
                </div>
            </div>
            <div class="dec">开启后，运用该方案的商品将与订单内的其他商品分开计费</div>
            <div class="compute">
                <div class="title">按重计费（除偏远地区外）：</div>
                <div class="inputBox">
                    <div class="inputItem">
                        <input
                                type="number"
                                min="0"
                                placeholder="1.00"
                                />
                        <span>Kg内</span>
                        <input type="number" min="0" placeholder="0.00"/>
                        <span>元</span>
                    </div>
                    <div class="inputItem">
                        <span>每增加</span>
                        <input type="number" min="0" placeholder="0.00"/>
                        <span>Kg，运费增加</span>
                        <input type="number" min="0" placeholder="0.00"/>
                        <span>元</span>
                    </div>
                </div>
            </div>
            <div class="confirm">确认</div>
        </div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    export default {
        components:{formHeader},
        name : "freightEdit",
        data(){
            return{
                name:''
            }
        },
        methods:{
            addName() {
                this.dialog = this.$createDialog({
                    type: 'prompt',
                    title: '我是标题',
                    prompt: {
                        value: '',
                        placeholder: '请输入'
                    },
                    onConfirm: (e, promptValue) => {
                        this.name = promptValue
                        this.$createToast({
                            type: 'warn',
                            time: 1000,
                            txt: `Prompt value: ${promptValue || ''}`
                        }).show()
                    }
                }).show()
            }
        }
    }
</script>

<style scoped lang="stylus">
.freightEdit
    .content
        margin-top 1.44rem
        .select
            .selectCell
                display flex
                padding 0 0.40rem
                height 1.15rem
                background-color  #fff
                justify-content space-between
                align-items center
                border-bottom 0.03rem solid #EEEEEE
                color #333333
                font-size 0.40rem
            .rightCell
                color #666666
                font-size 0.35rem
        .dec
            font-size 0.29rem
            color #999
            padding 0.27rem 0.40rem
        .compute
            .title
                color #333333
                font-size 0.40rem
                background-color  #fff
                padding 0.27rem 0.40rem
                border-bottom 0.03rem solid #eee
            .inputBox
                input
                    width 2rem
                    height 0.67rem
                    padding 0.16rem
                    border 0.03rem solid #eee
                    margin-right 0.13rem
                input::-webkit-input-placeholder
                    font-size 0.3rem
                    text-align left
                    padding 0.16rem
                .inputItem
                    font-size .35rem
                    background-color  #fff
                    padding 0.27rem 0.40rem
                    span
                        margin-right 0.13rem
        .confirm
            background-color: #00a398
            height 1.17rem
            width 100%
            display flex
            justify-content center
            align-items center
            color #fff
            font-size 0.48rem
            position fixed
            bottom 1.17rem
    /deep/.cube-switch .cube-switch-input:checked + .cube-switch-ui
        border-color rgb(39,219,207)
        background-color rgb(39,219,207)
</style>